<template>
    <div class="home">
        <div class="Recone">
            <div class="Reconefle">
                <div class="Recrighte">
                    <div class="RecrightTietle" > 碎片阅读 </div>
                </div>
                <div class="Recleft" :style="{backgroundImage:`url(${img})`}">

                    <div class="Chosecot" v-html="randomItem.neirong">

                    </div>
                </div>

                <div class="Recright">
                    <ul class="Recright_top u-f" @click="Choseup" >
                        <img src="../../assets/up.svg" alt="">
                    </ul>

                    <ul class="Recright_middle u-f" >
                        <img v-if="Isshow" src="../../assets/like.svg" @click="ChangeSvg(randomItem.shownimg)" alt="">
                        <img v-else src="../../assets/enjoy.svg" @click="ChangeSvg()" alt="">
                    </ul>
                    <div class="Chosebtn"  @click="ChoseRadom(poeamList)" v-bind="poeamList"> 开始推荐 </div>
                    <ul class="Recright_bottom u-f" @click="Chosedown" >
                        <img src="../../assets/down.svg" alt="">
                    </ul>
                </div>
            </div>

        </div>
    </div>
</template>

<script>
export default {
    methods:{
        ChangeSvg(show){
            this.randomItem.shownimg = !show;
            this.Isshow = this.randomItem.shownimg;
        },
        ChoseRadom(item){
            if(item.length>0){


                this.randomItem = item[Math.floor(Math.random() * item.length)];
                // console.log(this.randomItem);
                this.ReadHis.push(this.randomItem)
                for(var i = 0; i < item.length; i++){
                    if(item[i].id === this.randomItem.id){
                        item.splice(i,1);

                        this.ReadHisNumber = this.ReadHis.length;
                        console.log(this.ReadHisNumber)

                    }
                }
                this.Isshow = this.randomItem.shownimg;
                console.log(this.Isshow)
            }else{
                alert('今日推荐已阅读完')
            }

            // let length  = this.ReadHIs.length
            // this.ReadHisNumber = length;

        },
        Choseup(){
            if(this.ReadHisNumber>1){
                this.randomItem = this.ReadHis[this.ReadHisNumber-2];
                console.log(this.ReadHisNumber)
                console.log(this.ReadHis[this.ReadHisNumber-1])
                this.Isshow = this.randomItem.shownimg;
                return this.ReadHisNumber--;

            }else{
                alert('已经是第一条了')
            }
        },
        Chosedown(){
            if(this.ReadHisNumber<this.ReadHis.length){
                this.randomItem = this.ReadHis[this.ReadHisNumber];
                this.Isshow = this.randomItem.shownimg;
                return this.ReadHisNumber++;
            }else{

                alert('已经是最后一条了')
            }
        }
    },
    data(){
        return{
            img:require('../../assets/jpg.jpg'),
            randomItem:'',
            ReadHis:[],
            Choserun:true,
            ReadHisNumber:0,
            Isshow:true,
            poeamList:[
                {
                    id:'乡愁',
                    name:'余光中',
                    neirong:'小时候</br>乡愁是一枚小小的邮票</br>我在这头</br>母亲在那头</br>长大後</br>乡愁是一张窄窄的船票</br>我在这头</br>新娘在那头</br>後来啊</br>乡愁是一方矮矮的坟墓</br>我在外头</br>母亲在里头</br>而现在</br>乡愁是一湾浅浅的海峡</br>我在这头</br>大陆在那头',
                },{
                    id:'面朝大海，春暖花开',
                    name:'海子',
                    neirong:'从明天起, 做一个幸福的人</br>喂马, 劈柴, 周游世界</br>从明天起, 关心粮食和蔬菜</br>我有一所房子, 面朝大海, 春暖花开</br>从明天起, 和每一个亲人通信</br>告诉他们我的幸福</br>那幸福的闪电告诉我的</br>我将告诉每一个人</br>给每一条河每一座山取一个温暖的名字</br>陌生人, 我也为你祝福</br>愿你有一个灿烂的前程</br>愿你有情人终成眷属</br>愿你在尘世获得幸福</br>我只愿面朝大海, 春暖花开',
                },{
                    id:'灯光',
                    name:'朱自清',
                    neirong:'那泱泱的黑暗中熠耀着的</br>一颗黄黄的灯光呵，</br>我将由你的熠耀里，</br>凝视她明媚的双眼。',
                }
                ,{
                    id:'口供',
                    name:'闻一多',
                    neirong:'我不骗你，我不是什么诗人，</br>纵然我爱的是白石的坚贞，</br>青松和大海，鸦背驮著夕阳，</br>黄昏里织满了蝙蝠的翅膀。</br>你知道我爱英雄，还爱高山，</br>我爱一幅国旗在风中招展，</br>自从鹅黄到古铜色的菊花。</br>记著我的粮食是一壶苦茶！</br>可是还有一个我，你怕不怕──</br>苍蝇似的思想，垃圾桶里爬。',
                }
                ,{
                    id:'蝶恋花(百尺朱楼临大道)',
                    name:'王国维',
                    neirong:'百尺朱楼临大道，楼外轻雷，不间昏和晓。</br>独倚阑干人窈窕，闲中数尽行人老。    </br>一霎车尘生树杪， 陌上楼头，都向尘中老。</br>薄晚西风吹雨到，明朝又是伤流潦。',
                }
                ,{
                    id:'偶然',
                    name:'徐志摩',
                    neirong:'我是天空里的一片云，</br>偶尔投影在你的波心──</br>你不必讶异，</br>更无须欢喜──</br>在转瞬间消灭了踪影。</br>你我相逢在黑夜的海上，</br>你有你的，我有我的，方向；</br>你记得也好，</br>最好你忘掉</br>在这交会时互放的光亮！',
                }
                ,{
                    id:'桥',
                    name:'艾青',
                    neirong:'当土地与土地被水分割了的时候，</br>当道路与道路被水截断了的时候，</br>智慧的人类伫立在水边：</br>于是产生了桥。</br>苦于跋涉的人类，</br>应该感谢桥啊。</br>桥是土地与土地的连系；</br>桥是河流与道路的爱情；</br>桥是船只与车辆点头致敬的驿站；</br>桥是乘船与步行者挥手告别的地方。',
                }

            ]
        }
    }
}
</script>


<style>
    .Recrighte{
        box-sizing: border-box;
        height: 100%;
        width: 30px;
        border: 2px solid rgb(29, 32, 32);
        background-color: rgb(219, 122, 56);
        display: flex;

        margin:0;

    }
    .RecrightTietle{
        width: 26px;
        height: 64px;
        text-align: center;
        margin-top:200px;
    }
    .Chosecot{
        font-family: "Helvetica Neue" !important;
        line-height:1.7 !important;
        font-size: 16px Medium !important;
    }
    .Chosebtn{
        text-align: center;
        cursor: pointer;
    }
    .Recone{
        height: 500px;
        display: flex;
        justify-content: center;
    }

    .Reconefle{

        width: 82%;
        height: 100%;
        display: flex;
        justify-content: center;

    }
    .Recleft{
        margin-top: 2%;
        border-top: 5px solid rgb(20, 20, 20);
        border-bottom: 5px solid rgb(20, 20, 20);
        width: 94%;
        height: 90%;
        display:flex;
        justify-content:center;
        align-items:center;
        background-color: aqua;
        /* text-align: center; */
        /* float: left; */
    }

    .Recright{
        border: 2px solid rgb(29, 32, 32);
        background-color: rgb(219, 122, 56);
        box-sizing: border-box;
        height: 100%;
        width: 30px;

        flex-direction:column;
        display: flex;
        flex-flow: row wrap;
        align-content:space-between;
    }
    .Recright .u-f{
        height: 50px;
        width: 100%;
        display: flex;

        align-content:space-between;

    }
    .Recright ul:hover{
        cursor: pointer;
        background-color: #0d4650;
        color: #ffffff;
    }
    .Recright div:hover{
        border-bottom: 1px red;
        background-color: #0d4650;
        color: #ffffff;
    }
</style>
